<template>
	<!-- 考试 -->
	<view>
		<u-navbar back-icon-color="#fff" title-color="#fff" title="试卷分析" :border-bottom="false"></u-navbar>
		<view class="switch-tab">
			<view @click="activeTab = 1" :class="['tab', activeTab === 1 && 'active']">模拟考试</view>
			<view @click="activeTab = 2" :class="['tab', activeTab === 2 && 'active']">终极押题</view>
			<view @click="activeTab = 3" :class="['tab', activeTab === 3 && 'active']">学生组卷</view>
			<view class="switch-line"></view>
		</view>

		<view class="exam-list-con">
			<my-user-li
				v-if="activeTab == 3"
				v-for="(item, index) in list"
				:key="item.userid"
				:infoNode="lastItem(item.lasttime)"
				:infoName="item.username"
				:thumbnail="item.avatar"
				@click.native="gotoStudent(item.userid)"
			></my-user-li>
			<my-an-item v-for="(paper, index) in list" v-if="activeTab == 1 || activeTab == 2" :key="paper.paperid" :itemName="paper.papername" @click.native="gotoLink(paper.paperid)">
				<view slot="botLeft">
					<my-icon name="time"></my-icon>
					<text class="botTxt">结束时间：{{ paper.endtime }}</text>
				</view>
				<view slot="botRight">
					<my-icon name="baifenbi"></my-icon>
					<text class="botTxt">及格率：{{ paper.passProportion }}</text>
				</view>
			</my-an-item>
		</view>
		<my-empty v-if="list.length < 1" emptyTit="暂无数据"></my-empty>
		<!-- <u-loadmore v-show="isShowLoadMore"  @loadmore="loadmore" :status="status" icon-type="flower" :load-text="loadText" /> -->
	</view>
</template>

<script>
import exam from '../../mixins/exam.js';

export default {
	mixins: [exam],
	onLoad() {
		this.init();
	},
	onReachBottom() {
		!this.isLastPage && this.getPageData();
	},
	data() {
		return {
			activeTab: 1, //1模拟考试，2终极押题，3学生组卷
			examMoni: [], //模拟试卷
			examLast: [], //终极押题
			examStudent: [], //学生组卷
			pageNo: 1, //页码
			isLastPage: false, //是否最后一页
			status: 'loadmore',
			loadText: {
				loadmore: '点击更多',
				loading: '加载中...',
				nomore: '没有更多了'
			}
		};
	},
	watch: {
		activeTab: {
			handler(nVal, oVal) {
				this.init();
			}
		}
	},
	computed: {
		list() {
			return this.activeTab == 1 ? this.examMoni : this.activeTab == 2 ? this.examLast : this.examStudent;
		},
		lastItem() {
			return function(value) {
				if (value) {
					return '最近一次组卷考试：' + value;
				}
			};
		}
	},
	methods: {
		init() {
			this.pageNo = 1;
			this.examMoni = [];
			this.examLast = [];
			this.examStudent = [];
			if(this.activeTab==1){
				return this.getMoni()
			}else if(this.activeTab==2){
				return this.getYati()
			}else{
				return this.getStudent()
			}
		},
		openFlowChart() {
			uni.navigateTo({
				url: 'examProcess/examProcess'
			});
		},
		// 跳转考试详情
		gotoLink(paperid) {
			uni.navigateTo({
				url: '../examAnalysis/examDetails?paperid=' + paperid
			});
		},
		gotoStudent(userid) {
			uni.navigateTo({
				url: 'studentDetail?userId=' + userid + '&type=1&styles=1'
			});
		},
		getMoni(){
			// 模拟
			this.status = 'loading';
			const pageNo = this.pageNo;
			return new Promise((resolve, reject) => {
				this.request
					.post('/app/teacher/paperanalysis/getSimulationAndSubjectList', {
						papertype: 3,
						pageNo
					})
					.then(res => {
					//模拟考试
					this.examMoni = this.examMoni.concat(res.list);
					this.isLastPage = res.isLastPage;
					if (res.isLastPage) this.status = 'nomore';
					else this.pageNo++;
						resolve();
					})
			});
		},
		getYati(){
			// 押题
			this.status = 'loading';
			const pageNo = this.pageNo;
			return new Promise((resolve, reject) => {
				this.request
					.post('/app/teacher/paperanalysis/getSimulationAndSubjectList', {
						papertype: 2,
						pageNo
					})
					.then(res => {
					//模拟考试
					this.examLast = this.examLast.concat(res.list);
					this.isLastPage = res.isLastPage;
					if (res.isLastPage) this.status = 'nomore';
					else this.pageNo++;
						resolve();
					})
			});
		},
		getStudent(){
			// 学生
			this.status = 'loading';
			const pageNo = this.pageNo;
			return new Promise((resolve, reject) => {
				this.request
					.post('/app/teacher/paperanalysis/getStudentGroupPaperList', {
						pageNo
					})
					.then(res => {
					this.examStudent = this.examStudent.concat(res.list);
					this.isLastPage = res.isLastPage;
					if (res.isLastPage) this.status = 'nomore';
					else this.pageNo++;
						resolve();
					})
			});
		},
		getPageData() {
			console.log(this.activeTab,'12312')
			if(this.activeTab==1){
				this.getMoni()
			}else if(this.activeTab==2){
				this.getYati()
			}else{
				this.getStudent()
			}
		}
	}
};
</script>
<style scoped lang="scss">
.container {
	padding-bottom: 20upx;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.switch-line {
	position: absolute;
	bottom: 0upx;
	left: 0;
	height: 2upx;
	width: 100% !important;
	background: linear-gradient(to right, #f97c4b, rgba(255, 140, 95, 0.6), rgba(255, 140, 95, 0));
}
.u-load-more-wrap {
	margin-top: 40upx !important;
	margin-bottom: 40upx !important;
}
.empty {
	height: 80%;
	top: auto;
	bottom: 0;
}
.banner {
	width: 100%;
	height: 350upx;
}
.switch-tab {
	display: flex;
	display: -webkit-flex;
	align-items: flex-end;
	padding: 30upx;
	padding-bottom: 2upx;
	// background:#fff url(../../static/exam/line@3x.png) no-repeat;
	background-size: 100%;
	background-position: left bottom;
	box-sizing: content-box;
	height: 94upx;
	position: relative;
	view {
		width: 170upx;
		line-height: 70upx;
		text-align: center;
		font-size: 28upx;
		font-weight: 400;
		color: white;
		transition: all 0.2s ease-in-out;
		margin-right: 20upx;
	}
	view:nth-child(1) {
		background: url(../../static/online/tab-blue.png) no-repeat center;
		background-size: 100% 100%;
		background-position: 0 2px;
	}
	view:nth-child(2) {
		background: url(../../static/online/tab-org.png) no-repeat center;
		background-size: 100% 100%;
		background-position: 0 2px;
	}
	view:nth-child(3) {
		background: url(../../static/online/tab-pop.png) no-repeat center;
		background-size: 100% 100%;
		background-position: 0 2px;
	}
	.active {
		width: 224upx;
		line-height: 94upx;
		font-size: 32upx;
	}
}
</style>
